/*******************************************************************************
 * 图片裁剪工具 
 * 
 * @author JinXing
 * @date 2019年11月24日 下午14:36
 */

var $fileData; // 上传文件的数据
var $jcropDiv_width = 785; // layer宽度
var $jcropDiv_height = 425; // layer高度
var $original_width = 0; // 原图宽度
var $original_height = 0; // 原图高度
var $Ratio = 0; // 比例 （原图大小/展示大小）
var $jcropRealWidth = 580; // JCROP宽度
var $jcropRealHeight = 300; // JCROP高度
var $jcropShowWidth = 0; // JCROP右侧预览宽度
var $jcropShowHeight = 0; // JCROP右侧预览高度
var jcropMaxleft = 0; // JCROP margin-left值
var jcropMinleft = 0; // JCROP margin-left值
var jcropMaxTop = 0; // JCROP margin-right值
var jcropMinTop = 0; // JCROP margin-right值
var cut = []; // 图片裁剪对象
var oldCut = []; // 记录上次操作的cut对象
var $jcrop_api; // JCROP对象
var _last = Date.now();
var public_imageCut = {

		
	// 获取裁剪工具的实际大小
	getJcropSize : function(realWidth, realHeight) {

		if (!isNaN(realWidth) && !isNaN(realHeight) && realWidth > 0
				&& realHeight > 0) {

			var oldRealWidth = realWidth; // 原图宽度
			var oldRealHeight = realHeight; // 原图高度

			// 如果原图宽度大于指定的宽度，原图按照指定宽度进行原图比例缩放
			if (realWidth > $jcropRealWidth) {
				realWidth = $jcropRealWidth;
				realHeight = ($jcropRealWidth * (oldRealHeight / oldRealWidth));

			}

			// 如果原图高度大于指定的高度，原图按照指定高度进行原图比例缩放
			if (realHeight > $jcropRealHeight) {
				realHeight = $jcropRealHeight;
				realWidth = $jcropRealHeight * (oldRealWidth / oldRealHeight);

			}
			$Ratio = oldRealWidth / realWidth;

			// 小数保留2位
			$jcropRealWidth = Math.round(realWidth * 100) / 100;
			$jcropRealHeight = Math.round(realHeight * 100) / 100;

		}

	},

	/***************************************************************************
	 * 图片弹框和裁剪的公共方法
	 * 
	 * @param url
	 *            图片的网络地址
	 * @param imgWidth
	 *            图片展示区域的宽度 （用于宽高比）
	 * @param imgHeight
	 *            图片展示区域的高度 （用于宽高比）
	 * @param needWidth
	 *            图片所需宽度
	 * @param neddHeight
	 *            图片所需高度
	 * @param cutWidth
	 *            图片裁剪区域的宽度 （用于设置裁剪区域的宽度）
	 * @param cutHeigth
	 *            图片裁剪区域的高度 （用于设置裁剪区域的高度）
	 * @param layerWidth
	 *            layer弹窗的宽度
	 * @param layerHeight
	 *            layer弹窗的高度
	 * @param is_cut
	 *            是否裁剪（true是 false否）
	 * @param type
	 *            用于业务处理 （上传封面与上传教师头像业务区分）
	 * @param layerId
	 *            弹窗id
	 * @param imageCutDivId
	 *            图片裁剪外层DIV
	 * @param imageCutId:
	 *            图片裁剪id
	 */
	layerImageCut : function(dataParam) {
		if (document.getElementById("aspupload")) {
			$("#aspupload").hide(); // 隐藏上传进度
		}

		if (dataParam.url != null && dataParam.url != "") {
			$fileData = dataParam.dataSource;
			
			_imgReady(dataParam.url, function () { 
		    
				$jcropDiv_width = dataParam.layerWidth; // layer宽度
				$jcropDiv_height = dataParam.layerHeight; // layer高度
				$jcropRealWidth = dataParam.cutWidth;
				$jcropRealHeight = dataParam.cutHeight;
				$jcropShowWidth = dataParam.imgWidth + 20; // 裁剪工具预览
				// （20是margin-left的值）

				$original_width = this.width;
				$original_height = this.height;
				public_imageCut.getJcropSize($original_width, $original_height); // 获取压缩后图片的宽高（图片压缩比例算法与后端一致）

				// 如果JCROP裁剪工具已经被销毁，重新添加一个
				var length = $('#' + "layerImageCut").length;
				if (length <= 0) {
					$("#" + "layerCutLeft-div").html(
							"<div class='layerImageCut-div'><div  id='"
									+ "layerImageCut" + "'>"
									+ "<img alt=''  src='' width='' height=''>"
									+ "</div></div>");
				}

				$("#" + "layerImageCut" + ">img").attr("src", dataParam.url); // 图片
				// SRC
				$("#" + "layerImageCut" + ">img").attr("width",
						$jcropRealWidth + "px"); // 图片 宽度
				$("#" + "layerImageCut" + ">img").attr("height",
						$jcropRealHeight + "px"); // 图片高度
				$("#" + "layerImageCut").attr("width", $jcropRealWidth + "px"); // 裁剪工具宽度
				$("#" + "layerImageCut")
						.attr("height", $jcropRealHeight + "px"); // 裁剪工具高度
				// 加载图片裁剪工具
				if (dataParam.is_cut == true || dataParam.is_cut == "true") {
					// 设置参数
					$("#imageCutType").val(dataParam.typeName); // 所裁剪的图片类别
					// （courseImage、courseInstructor）

					$("#needWidth").text(dataParam.needWidth); // 所需尺寸（宽度）
					$("#needHeight").text(dataParam.neddHeight); // 所需尺寸（高度）

					// 设置样式
					$("#saveImageCut").show(); // 裁剪按钮
					$(".layerCutRight").show();// 裁剪工具预览区域
					$("#layerCutShow").css("width", dataParam.imgWidth); // 预览区域的宽度
					$("#layerCutShow").css("height", dataParam.imgHeight); // 预览区域的高度
					$("#layerCutShow>img").attr("src", dataParam.url); // 预览区域图片地址
					$("#layerCutShow>img").css("width", dataParam.imgWidth); // 预览区域图片宽度
					$("#layerCutShow>img").css("height", dataParam.imgHeight);// 预览区域图片高度
					$("#layerCutLeft-div").find("img").css("border",
							"1px solid #ccc");
					$("#layerCutLeft-div").css("width",
							dataParam.cutLeftWidth + "px");
					$("#layerImageCut-div").css("width",
							dataParam.cutDivWidth + "px");
					$("#layerImageCut-div").css("height",
							dataParam.cutDivHeight + "px");

					//加载弹窗和裁剪工具
					public_imageCut.layerImageCutShow(zLocale.public_imagecut,$jcropDiv_width, $jcropDiv_height,"layerImageShow");
					public_imageCut.loadImageCut(dataParam.imgWidth,dataParam.imgHeight);
					var _leftHeight = $("#layerCutLeft-div").height();
					var _JcropHeight = $("#layerCutLeft-div>div").height();
					$("#layerCutLeft-div>div").css("top",(_leftHeight - _JcropHeight) / 2 + "px");

				}
			});//

		}
	},

	//图片裁剪弹框
	layerImageCutShow : function(title, _width, _height, layerId) {
		var offset_top = 10; // 头部10
		var offset_left = ($(document).width() - $jcropDiv_width) / 2; // 左右居中
		// 关闭之前的弹窗
		layer.closeAll();
		layer.open({
			type : 1,
			shift : 5,
			shade : [ 0.5, '#393D49' ],
			offset : [ offset_top, offset_left ],
			title : title,
			area : [ _width, _height ],
			fix : false,
			// 不固定
			move : false,
			// maxmin: true,
			// 最大化最小化
			zIndex : 9900,
			content : $("#" + layerId),
			end : function() { // 关闭弹窗

				// 如果裁剪工具存在 ，进行销毁（弹窗加载时重新添加一个）
				var type = $("#imageCutType").val();
				if (type != null && type.length > 0) {
					$jcrop_api.destroy(); // 销毁裁剪工具
				}
			}
		});

	},

	// 加载图片裁剪工具
	// width 裁剪工具初始化宽度
	// height 裁剪工具初始化高度
	loadImageCut : function(width, height) {

		$('#layerImageCut').Jcrop(
				{
					allowSelect : true,
					// 允许新的裁剪框
					allowResize : true,
					// 允许调整截取窗口框大小
					allowMove : true,
					// 允许移动
					bgFade : true,
					// 使用背景过渡效果
					bgColor : "white",
					// 背景颜色
					bgOpacity : .5,
					// 背景透明度
					aspectRatio : width / height,
					animationDelay : 50,
					// 选框宽高比
					handleSize : 20,
					// 缩放按钮大小
					keySupport : true,
					// 支持键盘移动
					onDblClick : function() {// 选框双击事件

					},
					onRelease : function() {// 取消选框事件
						if ($jcrop_api != null) {
							$jcrop_api.setOptions({
								setSelect : [ 0, 0, 0, 0 ]
							});
						}

					},
					onChange : function(c) { // 选框改变时的事件
					},
					onSelect : function(c) { // 选框选定时的事件

						console.log(c);
						if (c != null) {

							var realWidth = 0;
							var realHeight = 0;
							var needW = $("#needWidth").text(), needH = $(
									"#needHeight").text();

							if (!isNaN(c.w) && !isNaN(c.h) && c.w > 0
									&& c.h > 0) {

								var selectWidth = $("#imageCut-select").attr(
										"data-width");
								var selectHeight = $("#imageCut-select").attr(
										"data-height");
								if (!isNaN(selectWidth) && !isNaN(selectHeight)
										&& selectWidth != ""
										&& selectHeight != "") {
									realWidth = Math
											.round(selectWidth * $Ratio);
									realHeight = Math.round(selectHeight
											* $Ratio);

									oldCut.sw = selectWidth;
									oldCut.sh = selectHeight;

									// 清空大小按钮遗留的数据
									$("#imageCut-select")
											.attr("data-width", "");
									$("#imageCut-select").attr("data-height",
											"");

								} else {
									if (oldCut != null && oldCut.sw != ""
											&& oldCut.sh != ""
											&& oldCut.w == c.w
											&& oldCut.h == c.h) {
										realWidth = Math.round(oldCut.sw
												* $Ratio);
										realHeight = Math.round(oldCut.sh
												* $Ratio);
										// oldCut=null;
									} else {
										oldCut.sw = "";
										oldCut.sh == "";
										realWidth = Math.round(c.w * $Ratio);
										realHeight = Math.round(c.h * $Ratio);
									}

								}

								if (realWidth >= $original_width) {
									c.x = 0;
									realWidth = $original_width;
								}
								if (realHeight >= $original_height) {
									c.y = 0;
									realHeight = $original_height;
								}

							}
							cut = c;
							oldCut.w = cut.w;
							oldCut.h = cut.h;

							$("#realWidth").text(realWidth); // 当前选框的宽度
							$("#realHeight").text(realHeight); // 当前选框的高度

							public_imageCut.getRightImagePosition(c);// 图片预览

							// 设置实际尺寸文本的样式
							if (realWidth < needW || realHeight < needH) {

								$(".actualSize").css("color", 'red');
							} else {

								$(".actualSize").css("color", '#ccc');
							}

						}
					},
				}, function() {
					$jcrop_api = this; // JCROP 对象
					var c = {
						"x" : 0,
						"y" : 0,
						"x2" : width,
						"y2" : height,
						"w" : width,
						"h" : height
					};

					// 截取窗口框最大和最小的像素只能是690 * 220像素
					// $jcrop_api.setOptions({
					// minSize: [690, 220],
					// maxSize: [750, 422]
					// });

					// 设定裁剪框的初始位置
					$jcrop_api.setOptions({
						setSelect : [ c.x, c.y, c.x2, c.y2 ]
					});
				});

		// 绑定裁剪按钮
		public_imageCut.saveImageCut();
		// 设置快速裁剪的尺寸
		public_imageCut.setImageSize();
	},

	// 设置图片的裁剪尺寸
	setImageSize : function() {
		// 设置最大尺寸裁剪框
		$("#bigImage").die("click").live("click", function() {

			if ($jcrop_api != null) {

				var needWidth = $("#needWidth").text();// 需要的宽度
				var needHeight = $("#needHeight").text();// 需要高度
				var width = $("#layerImageCut>img").width();// 图片宽度
				var height = $("#layerImageCut>img").height();// 图片高度
				var x = 0, y = 0, x2 = 0, y2 = 0;
				if (needWidth > needHeight) {
					x2 = width;
					y2 = width * (needHeight / needWidth);
				} else {
					y2 = height;
					x2 = height * (needWidth / needHeight);
				}

				$("#imageCut-select").attr("data-width", x2);
				$("#imageCut-select").attr("data-height", y2);
				$jcrop_api.setOptions({
					setSelect : [ x, y, x2, y2 ]
				});

			}

		});
		// 设置最小尺寸裁剪框
		$("#smallImage").die("click").live("click", function() {

			if ($jcrop_api != null) {

				var needWidth = $("#needWidth").text();// 需要的宽度
				var needHeight = $("#needHeight").text();// 需要高度
				var width = $("#layerImageCut>img").width();// 图片宽度
				var height = $("#layerImageCut>img").height();// 图片高度
				var x = 0, y = 0, x2, y2;

				needWidth = needWidth / $Ratio;
				needHeight = needHeight / $Ratio;

				if (needWidth > needHeight) {
					if (width >= needWidth) {
						x2 = needWidth;
						y2 = needHeight;
					} else {
						x2 = width;
						y2 = width * (needHeight / needWidth);
					}
				} else {
					if (height >= needWidth) {
						x2 = needWidth;
						y2 = needHeight;
					} else {
						y2 = height;
						x2 = height * (needWidth / needHeight);
					}
				}

				$("#imageCut-select").attr("data-width", x2);
				$("#imageCut-select").attr("data-height", y2);
				$jcrop_api.setOptions({
					setSelect : [ x, y, x2, y2 ]
				});

			}

		});
	},

	// 预览图片
	getRightImagePosition : function(c) {
		if (parseInt(c.w) > 0) {
			var w = $("#layerCutShow").width(); // 预览的图片宽度
			var h = $("#layerCutShow").height();// 预览的图片高度

			var rx = w / c.w; // 宽度/选框宽度
			var ry = h / c.h; // 高度/选框高度
			var bounds = $jcrop_api.getBounds();
			boundx = bounds[0];
			boundy = bounds[1];

			$('#layerCutShow>img').css({
				width : Math.round(rx * boundx) + 'px',
				height : Math.round(ry * boundy) + 'px',
				marginLeft : '-' + Math.round(rx * c.x) + 'px',
				marginTop : '-' + Math.round(ry * c.y) + 'px',
			});

		}
	},

	// 点击裁剪按钮
	saveImageCut : function() {

		$("#saveImageCut").die("click").live("click",function() {
			
			  var now = Date.now();
		      if((now - _last)>1500){

		    	  if (cut != null && cut.w == 0 && cut.h == 0) {
						_public_imageCut_layerForm.saveFailure();
						return;
					}

					var _needWidth = $("#needWidth").text(), // 建议宽度
					_needHeight = $("#needHeight").text(), // 建议高度
					_realWidth = $("#realWidth").text(), // 实际宽度
					_realHeight = $("#realHeight").text();// 实际高度

					if (!isNaN(_needWidth) && !isNaN(_needHeight)
							&& !isNaN(_realWidth)
							&& !isNaN(_realHeight)) {
						_needWidth = parseFloat(_needWidth);
						_needHeight = parseFloat(_needHeight);
						_realWidth = parseFloat(_realWidth);
						_realHeight = parseFloat(_realHeight);

						// 如果图片小于首页展示的裁剪尺寸，给用户提示
						if (_realWidth >= _needWidth
								&& _realHeight >= _needHeight) {

							// 请求服务器进行图片裁剪
							public_imageCut.fullImageCut();
						} else {

							// 不同的类型的提示信息
							var typeName = $("#imageCutType").val();
							var message = zLocale.public_cutcourseimage;
							// 教师头像业务处理
							if (typeName == Constants.firstStep_courseInstructor) {
								message = zLocale.public_cutcourseinstructor;
							}

							_public_imageCut_layerForm.saveCofirm(message);

						}

					}
		      }
		      _last = now;
							

			});
	},

	// 禁用裁剪按钮
	disable_ImageCutBar : function() {
		$("#saveImageCut").die("click");
		$("#saveImageCut").css("background", "#ccc");
		$("#saveImageCut").attr("data-enable", "false");
	},
	// 启用裁剪按钮
	enable_ImageCutBar : function() {

		$("#saveImageCut").css("background", "#1aa1b5");
		$("#saveImageCut").attr("data-enable", "true");
	},

	// 请求服务器进行裁剪
	fullImageCut : function() {
		var url = $("#layerImageCut>img").attr("src");

		if (cut != null && url != null && url != "") {

			var realW = $("#realWidth").text(), realH = $("#realHeight").text();
			// 传值使用模型驱动的方式，赋值使用：dto.parameter
			var dataParm = {

				"url" : url,
				// 裁剪图片源图地址
				"leftX" : cut.x < 0 ? 0 : Math.round(cut.x * $Ratio),
				// 裁剪区域左边X轴
				"leftY" : cut.y < 0 ? 0 : Math.round(cut.y * $Ratio),
				// 裁剪区域左边Y轴
				"width" : realW,
				// 裁剪区域宽度
				"height" : realH,
				// 裁剪区域高度
				"cutType" : 1,
			// type （1.原图裁剪 2.指定的宽高比例裁剪 3.指定的宽高比例在原图进行裁剪）
			};

			$.ajax({
						type : "post",
						url : basePath + "/tools/fullImageCut",
						data : dataParm,
						cache : false,
						async : false,
						// 异步请求
						dataType : 'json',
						beforeSend : function() {
							// 禁用裁剪按钮防止重复点击
							//public_imageCut.disable_ImageCutBar();
						},
						complete : function() {
							// 启用裁剪按钮防止重复点击
							//public_imageCut.enable_ImageCutBar();
						},
						success : function(response) {
							if (response.success == true && response.result != null && response.result != "") {

								// 关闭弹框
								layer.closeAll();
								var typeName = $("#imageCutType").val();
								var url = response.result.data;
								// 业务处理
								if (typeName == Constants.firstStep_courseImage) {

									//更新第一个课程封面
									cut_CourseImage(url);

								} else if (typeName == Constants.firstStep_courseInstructor) {

									// 更新第一步教师团队
									$fileData.filePath = url;
									cut_CourseTeacherImage($fileData);
									
								}
								//更新ImageList
								_updateImageList();

								if (document.getElementById("aspupload")) {
									$("#aspupload").show(); // 显示上传进度
								}
								
							} else {
								console.log("erro:" + response.result);
							}
						},
						error : function(data) {
						}
					});
		}

	},

};

// 裁剪公共提示信息
_public_imageCut_layerForm = {

	// 裁剪按钮提示信息
	saveCofirm : function(message) {

		layer.confirm("<div class='layerconfirm_wordWrap'>" + message
				+ "</div>", {
			title : ' ',
			area : '400px',
			offset : '100px',
			skin : 'layui-layer-zhs',
			icon : 7,
			shade : 0.6,
			btn : [ zLocale.public_confim, zLocale.public_cancel ]
		// 按钮
		}, function(index) {
			// do something

			layer.close(index);
			public_imageCut.fullImageCut();
		});
	},

	// 裁剪不成功提示信息
	saveFailure : function() {

		layer.msg(zLocale.public_cut_savefailure, {
			icon : 2,
			offset : 'rb',
			offset : '10px',
			time : 2000
		// 2秒关闭（如果不配置，默认是3秒）
		}, function() {
			// do something
		});
	}

}
// JavaScript 获取网络图片的尺寸

function getImageSize(src) {

	var image = new Image();
	image.src = src;
	image.onload = function() {
		// alert(image.width);
		// alert(image.height);
	}
	return image;
}